<%--
  Created by IntelliJ IDEA.
  User: hxh
  Date: 16/4/19
  Time: 上午10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE HTML>
<html>
<head>
  <title>用户列表</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
  <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>

</head>

<body>
<div class="content" style="margin: 15px">

  <!-- 搜索页 ================================================== -->
  <div class="row">

    <form id="searchForm" class="form-horizontal" tabindex="0" style="outline: none;">
      <div class="row">
        <div class="control-group span8">
          <label class="control-label">标题：</label>

          <div class="controls">
            <input type="text" name="title" class="control-text">
          </div>
        </div>
        <div class="form-actions span5">
          <button id="btnSearch" type="submit" class="button button-primary">搜索</button>
        </div>
      </div>

    </form>

  </div>
  <div class="search-grid-container">
    <div id="grid">
    </div>

  </div>


  <div id="content" class="hide">
    <form id="J_Form" class="form-horizontal" action="./edit" method="post" enctype="multipart/form-data">

      <div class="row">
        <div class="control-group span12">
          <label class="control-label"><s>*</s>标题</label>

          <div class="controls">
            <input type="text" name="title" class="control-text" data-rules="{required:true}">
          </div>
        </div>

      </div>
      <div class="row">
        <div class="control-group span12">
          <label class="control-label"><s>*</s>上传插图：</label>

          <div class="controls control-row2">
            <div id="J_Uploader"></div>
            <input id="img" name="img" type="hidden" value=""/>
          </div>
        </div>

      </div>

      <div class="row">
        <div class="control-group span12">
          <label class="control-label"><s>*</s>动态显示</label>

          <div class="controls">
            <select name="type">
              <option value="1">是</option>
              <option value="0">否</option>
            </select>
          </div>
        </div>

      </div>


      <div class="row">
        <div class="control-group span12">
          <label class="control-label"><s>*</s>是否可用</label>

          <div class="controls">
            <select name="status">
              <option value="1">是</option>
              <option value="0">否</option>
            </select>
          </div>
        </div>

      </div>


      <div class="row">
        <div class="control-group span12">
          <label class="control-label">链接新闻ID</label>

          <div class="controls">
            <input type="text" name="newsId" class="control-text" data-tip="{text:'请输入对应新闻Id'}" data-rules="{required:true}">
          </div>
        </div>

      </div>

    </form>
  </div>


  <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="/static/bui/js/bui.js"></script>
  <script type="text/javascript" src="/static/bui/js/uploader-min.js"></script>
  <script src="/static/bui/js/config.js"></script>
  <script type="text/javascript">

    BUI.use(['common/search', 'bui/uploader'], function (Search, Uploader) {
      var editing = new BUI.Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                autoSave: true, //添加数据或者修改数据时，自动保存
                triggerCls: 'btn-edit',
                buttons: []
              }),
              enumObj = {"1": "是", "0": "否"};
      var columns = [
                {title: 'ID', width: 150, sortable: true, dataIndex: '_id'},
                {title: '标题', width: 100, sortable: true, dataIndex: 'title'},
                {
                  title: '插图', width: 215, renderer: function (value, obj) {
                  return "<a href='http://img.oss.hd1905.com/" + obj.img + "' target='_Blank'><div style='width: 100px'><img style='width:100%;height=100%' src='http://img.oss.hd1905.com/" + obj.img + "'></img></div></a>"
                }
                },
                {
                  title: '动态显示',
                  width: 150,
                  sortable: true,
                  dataIndex: 'type',
                  renderer: BUI.Grid.Format.enumRenderer(enumObj)
                },
                {
                  title: '是否可用',
                  width: 150,
                  sortable: true,
                  dataIndex: 'status',
                  renderer: BUI.Grid.Format.enumRenderer(enumObj)
                },
                {title: '链接新闻ID', width: 100, sortable: true, dataIndex: 'newsId'},
                {
                  title: '创建日期',
                  sortable: true,
                  dataIndex: 'created',
                  width: 150,
                  renderer: BUI.Grid.Format.datetimeRenderer
                },
                {
                  title: '操作', width: 150, dataIndex: 'g', renderer: function () {
                  var editStr1 = '<span class="grid-command btn-edit" title="编辑信息">编辑</span>';
                  return editStr1
                }
                }
              ]
              ;

      var uploader = new BUI.Uploader.Uploader({
        render: '#J_Uploader',
        url: '/uploadImage.json',
        rules: {
          //文的类型
          ext: ['.jpg,.png,.jpeg', '文件类型只能为{0}']
        },
        //可以直接在这里直接设置成功的回调
        isSuccess: function (result) {
          if (result.state == 'SUCCESS') {
            BUI.Message.Alert("上传成功！")
            $("#img").val(result.url)
          } else {
            BUI.Message.Alert("上传失败！")
          }

        }

      }).render();


      var store = Search.createStore('/dynamic/list.json', {
                proxy: {
                  save: { //也可以是一个字符串，那么增删改，都会往那么路径提交数据，同时附加参数saveType
                    addUrl: './edit',
                    updateUrl: './edit'
                  }
                  ,
                  method: 'POST'
                },
                autoSync: true,
                pageSize: 10
                //保存数据后，自动更新

              }),
              gridCfg = Search.createGridCfg(columns, {
                tbar: {
                  items: [
                    {
                      text: '<i class="icon-plus"></i>新建',
                      btnCls: 'button button-small',
                      handler: addFunction
                    },
                    {
                      text: '<i class="icon-remove"></i>删除',
                      btnCls: 'button button-small',
                      handler: delFunction
                    }
                  ]
                },
                plugins: [editing, BUI.Grid.Plugins.CheckSelection, BUI.Grid.Plugins.AutoFit] // 插件形式引入多选表格
              });

      var search = new Search({
                store: store,
                gridCfg: gridCfg
              }),
              grid = search.get('grid');

      function addFunction() {
        var newData = {isNew: true, id: 0}; //标志是新增加的记录
        editing.add(newData, 'name'); //添加记录后，直接编辑
      }

      function delItems(items) {
        var ids = [];
        BUI.each(items, function (item) {
          ids.push(item.id);
        });

        if (ids.length) {
          BUI.Message.Confirm('确认要删除选中的记录么？', function () {
            $.ajax({
              url: './delete.json',
              dataType: 'json',
              data: {ids: ids.toString()},
              type: "POST",
              success: function (data) {
                if (data.code == 2000) {
                  search.load()
                } else {
                  BUI.Message.Alert("删除失败")
                }
              }
            })
          }, 'question');
        }
      }

      //删除操作
      function delFunction() {
        var selections = grid.getSelection();
        delItems(selections);
      }

    })

  </script>
</div>
</body>
</html>


